import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import axios from 'axios'
import { Grid, IndexBar, List, SearchBar, Tag,Toast } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { debounce } from 'lodash'
import { setCity } from '../../store/city'
function Index() {
  const { type } = useParams()//获取类型
  const nav = useNavigate()//跳转
  const dispatch = useDispatch()//仓库事件
  const [list, setList] = useState([])//城市列表
  const [sslist, setSslist] = useState([])//搜索列表
  const [kkk, setKkk] = useState(false)//是否显示搜索列表
  const [lsjl,setLsjl]=useState(
    JSON.parse(localStorage.getItem('lsjl')) || []//历史搜索记录
  )  
    useEffect(()=>{//更新历史搜索记录
      localStorage.setItem('lsjl',JSON.stringify(lsjl))
    },[lsjl])
  const getdata = async () => {//获取城市数据
    const res = await axios.get('/api/city')
    console.log(res);
    setList(res.data.data)
  }
  useEffect(() => {
    getdata()
  }, [])//组件挂载时获取城市数据
  const dj=(city)=>{//选择城市
    dispatch(setCity({type,city}))
    nav('/')
  }
  const search = debounce(async (wd) => {//搜索城市
    if (wd === '') {
      setKkk(false)
      setSslist([])
      return
    } else {
      const res = await axios.get('/api/city/search', { params: { wd } })
      console.log(res);
      const {code,data,message}=res.data
      if(code===200){
        setKkk(true)
        setSslist(data)
      }else{
        Toast.show(message)
      }
    }
    setLsjl(lsjl.concat(wd))
      // const index=lsjl.lastIndexOf(wd)
      // if(index>-1){
      //   lsjl.splice(index,1)
      // }
      // lsjl.push(wd)
      // setLsjl(lsjl)
      // localStorage.setItem('lsjl',JSON.stringify(lsjl))
  }, 800)
  const qk=()=>{//清空历史搜索记录
    setLsjl([])
    localStorage.removeItem('lsjl')
  }
  return (
    <div>
      <SearchBar onChange={(val) => search(val)} />
      {
        kkk ? <><List>
            {
              sslist?.map((v, i) => {
                return <List.Item key={i} onClick={()=>dj(v.name)}>{v.name}</List.Item>
              })
            }
          </List></> : <>
            <h4>历史搜索</h4><button onClick={()=>qk()}>清空</button>
            <div>
              {
                lsjl?.map((v, i) => {
                  return <Tag key={i} style={{ margin: '5px' }} onClick={()=>dj(v)}>{v}</Tag>
                })
              }
            </div>
          <h4>热门城市</h4>
          <div>
            {
              list.hotCities?.map((v, i) => {
                return <Tag key={i} style={{ margin: '5px' }} onClick={()=>dj(v.name)}>{v.name}</Tag>
              })
            }
          </div>
          <div style={{ height: '90vh' }}>
            <IndexBar>
              {list.city?.map(group => {
                const { initial, list } = group
                return (
                  <IndexBar.Panel
                    index={initial}
                    title={`标题${initial}`}
                    key={`标题${initial}`}
                  >
                    <List>
                      {list?.map((item, index) => (
                        <List.Item key={index} onClick={()=>dj(item.name)}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
            </IndexBar>
          </div></>
      }

    </div>
  )
}

export default Index